<template>
    <header class="bg-white shadow-sm w-full">
        <el-affix :offset="0">
            <div class="w-full max-w-full mx-auto text-gray-600 bg-gray-50 shadow-sm border-b border-gray-100">
                <div class="flex items-center justify-between h-11 px-6 max-w-7xl mx-auto text-sm">
                    <div class="flex items-center space-x-6">
                        <a class="hover:text-primary transition-colors duration-200 font-medium cursor-pointer">環地移民 - 专业的移民服务平台</a>
                    </div>
                </div>
            </div>
        </el-affix>
        <div class="flex items-center justify-between h-20 px-4 max-w-7xl mx-auto">
            <div class="flex items-center">
                <a href="/" class="flex items-center">
                    <img class="text-3xl font-['Pacifico'] text-primary" src="/@/assets/image/logoico.png" />
                    <span class="ml-2 text-sm text-gray-600">让世界通行无阻，变居无忧</span>
                </a>
                <div class="flex items-center space-x-8">
                    <a href="#" class="flex items-center">
                        <i class="fas fa-phone-alt text-primary"></i>
                        <span class="ml-2">免费热线</span>
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-6">
                <div class="relative">
                    <input
                        type="text"
                        placeholder="输入关键字搜索"
                        class="w-64 h-10 pl-4 pr-10 border border-gray-200 rounded-button focus:outline-none focus:border-primary"
                    />
                    <button class="absolute right-3 top-1/2 transform -translate-y-1/2">
                        <i class="fas fa-search text-gray-400"></i>
                    </button>
                </div>
            </div>
        </div>
        <el-affix :offset="40">
            <nav id="mainNav" class="bg-primary transition-all shadow-xl duration-300 w-full">
                <div class="flex items-center justify-center h-12 px-4 text-white w-full max-w-full mx-auto">
                    <div class="relative group">
                        <a
                            @click.prevent="$router.push({ name: '/' })"
                            href="#"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                        >
                            <i class="fas fa-house mr-1 text-xs"></i>环地首页
                        </a>
                        <div
                            class="absolute left-0 top-full w-64 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">快速导航</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">首页介绍</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">最新活动</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">热门项目</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">成功案例</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            @click.prevent="$router.push({ name: 'oceania' })"
                            href="#"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-globe-asia mr-1 text-xs"></i>大洋洲移民</a
                        >
                        <div
                            class="absolute left-0 top-full w-72 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">大洋洲热门项目</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">澳洲技术移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">澳洲投资移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">澳洲雇主担保</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">新西兰技术移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">新西兰创业移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">新西兰投资移民</a>
                                </div>
                                <div class="mt-3 pt-2 border-t border-gray-100">
                                    <a href="#" class="flex items-center text-primary text-sm">
                                        <span>查看更多项目</span>
                                        <i class="fas fa-chevron-right text-xs ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="america.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-globe-americas mr-1 text-xs"></i>美洲移民</a
                        >
                        <div
                            class="absolute left-0 top-full w-80 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="grid grid-cols-2">
                                <div class="p-4">
                                    <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">北美热门项目</h3>
                                    <div class="space-y-1">
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">美国EB-5投资移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">美国L1企业高管</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">加拿大萨省企业家</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">加拿大BC省提名</a>
                                    </div>
                                </div>
                                <div class="bg-gray-50 p-4">
                                    <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">南美热门项目</h3>
                                    <div class="space-y-1">
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">巴西投资移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">智利创业移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">阿根廷创业移民</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="europe.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-globe-europe mr-1 text-xs"></i>欧洲移民</a
                        >
                        <div
                            class="absolute left-0 top-full w-80 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">欧洲热门项目</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">希腊购房移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">葡萄牙黄金签证</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">马耳他国债计划</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">西班牙购房移民</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">英国创新签证</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">爱尔兰投资移民</a>
                                </div>
                                <div class="mt-3 pt-2 border-t border-gray-100 flex justify-between">
                                    <a href="#" class="flex items-center text-primary text-sm">
                                        <span>查看全部项目</span>
                                        <i class="fas fa-chevron-right text-xs ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="asia-africa.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-globe-asia mr-1 text-xs"></i>亚非移民</a
                        >
                        <div
                            class="absolute left-0 top-full w-80 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="grid grid-cols-2">
                                <div class="p-4">
                                    <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">亚洲热门项目</h3>
                                    <div class="space-y-1">
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">新加坡创业移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">日本创业签证</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">韩国投资移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">泰国精英签证</a>
                                    </div>
                                </div>
                                <div class="bg-gray-50 p-4">
                                    <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">非洲热门项目</h3>
                                    <div class="space-y-1">
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">毛里求斯永居</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">埃及购房移民</a>
                                        <a href="#" class="text-gray-600 hover:text-primary text-sm block">南非商业投资</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="property.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-home mr-1 text-xs"></i>海外房产</a
                        >
                        <div
                            class="absolute left-0 top-full w-72 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">海外房产热门项目</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">澳大利亚房产</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">美国房产</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">希腊房产</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">西班牙房产</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">葡萄牙房产</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">日本房产</a>
                                </div>
                                <div class="mt-3 pt-2 border-t border-gray-100">
                                    <a href="#" class="flex items-center text-primary text-sm">
                                        <span>查看更多项目</span>
                                        <i class="fas fa-chevron-right text-xs ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            @click.prevent="$router.push({ name: 'education' })"
                            href="#"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-graduation-cap mr-1 text-xs"></i>寰宇教育</a
                        >
                    </div>
                    <div class="relative group">
                        <a
                            href="study-abroad.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-newspaper mr-1 text-xs"></i>留学教育</a
                        >
                        <div
                            class="absolute left-0 top-full w-72 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <h3 class="text-primary font-bold mb-3 border-b border-gray-100 pb-2">热门学校</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">澳大利亚留学</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">新加坡留学</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">新西兰留学</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">美国留学</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">英国留学</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">日本留学</a>
                                </div>
                                <div class="mt-3 pt-2 border-t border-gray-100">
                                    <a href="#" class="flex items-center text-primary text-sm">
                                        <span>查看更多学校</span>
                                        <i class="fas fa-chevron-right text-xs ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="news.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-newspaper mr-1 text-xs"></i>环地资讯</a
                        >
                        <div
                            class="absolute left-0 top-full w-64 bg-white shadow-lg rounded overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"
                        >
                            <div class="p-4">
                                <div class="grid grid-cols-2 gap-2">
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">活动讲座</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">签证百科</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">移民资讯</a>
                                    <a href="#" class="text-gray-600 hover:text-primary text-sm py-1">海外房产资讯</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative group">
                        <a
                            href="about.html"
                            class="px-6 h-full flex items-center hover:bg-primary-dark group-hover:bg-primary-dark transition-colors duration-200 relative font-medium after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 hover:after:w-2/3 after:h-0.5 after:bg-white after:transition-all after:duration-300"
                            ><i class="fas fa-globe-asia mr-1 text-xs"></i>关于环地</a
                        >
                    </div>
                </div>
            </nav>
        </el-affix>
    </header>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { loadCss } from '/@/utils/common'
import '/@/assets/css/style.css'
import '/@/assets/css/areas.css'
/**
 * 动态加载的 css 和 js
 */
const cssUrls: Array<string> = [
    // 'https://fonts.gstatic.com',
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css',
]

onMounted(() => {
    // 加载外部资源
    if (cssUrls.length > 0) {
        cssUrls.map((v) => {
            loadCss(v)
        })
    }
})
</script>

<style scoped lang="scss"></style>
